<template>
  <div class="content">
    <div class="game_item">
      <ImgT src="/imgs/club/isLocked.png" class="game_icon" alt="" v-if="isLocked" />
      <ImgT :src="icon" alt="game_icon" class="game_icon" v-else />
      <div class="game_info">
        <h3 class="game_text">{{ title }}</h3>
        <p class="game_description">{{ description }}</p>
      </div>
      <div
        class="game_action"
        :class="{ locked: isLocked }"
        @click="handleClick"
      >
        <ImgT src="/imgs/club/arrow.png" alt="" v-if="!isLocked" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { useI18n } from "vue-i18n";
// import { ref  } from "vue";
// import {useRoute, useRouter} from "vue-router";

// const route = useRoute();
// const router = useRouter();
// const { t } = useI18n();

const props: any =  defineProps({
  icon: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    required: true,
  },
  isLocked: {
    type: Boolean,
    default: false,
  },
});

const handleClick = () => {
  if (!props.isLocked) {

  }
}

</script>

<style scoped lang="scss">
.content {
  width: 100vw;

  .game_item {
    width: 272px;
    height: 79px;
    margin-left: 14px;
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    background: #1D1C3C;
  }

  .game_icon {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }

  .game_info {
    flex: 1;
  }

  .game_text {
    font-size: 16px;
    margin: 0;
    color: #FFF;
  }

  .game_description {
    font-size: 12px;
    color: #AFB6BD;
  }

  .game_action {
    img {
      width: 24px;
      height: 24px;
    }
  }

  .locked {
    cursor: not-allowed;
    color: #ccc;
  }
}
</style>
